<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.3.0">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css">

<script class="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"example.com","root":"/","images":"/images","scheme":"Muse","version":"8.3.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"}};
  </script>
<meta name="description" content="CSS概述CSS指层叠样式表 一般格式selector&amp;#123;	property:value&amp;#125;例如：h1&amp;#123;color:red; font-size:14px;&amp;#125;  属性大于1个，属性之间要用分号隔开 如果值大于1个单词，则需要加上引号：p&amp;#123;font-family:&quot;sans serif&quot;&amp;#125;  CSS高级语法 选择器分组  可">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS基础">
<meta property="og:url" content="http://example.com/2021/01/28/CSS/index.html">
<meta property="og:site_name" content="Lawted&#39;s Blog">
<meta property="og:description" content="CSS概述CSS指层叠样式表 一般格式selector&amp;#123;	property:value&amp;#125;例如：h1&amp;#123;color:red; font-size:14px;&amp;#125;  属性大于1个，属性之间要用分号隔开 如果值大于1个单词，则需要加上引号：p&amp;#123;font-family:&quot;sans serif&quot;&amp;#125;  CSS高级语法 选择器分组  可">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2021-01-28T03:23:46.000Z">
<meta property="article:modified_time" content="2021-04-27T12:34:55.774Z">
<meta property="article:author" content="Lawted Wu">
<meta property="article:tag" content="技术">
<meta name="twitter:card" content="summary">


<link rel="canonical" href="http://example.com/2021/01/28/CSS/">


<script class="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'en'
  };
</script>
<title>CSS基础 | Lawted's Blog</title>
  




  <noscript>
  <style>
  body { margin-top: 2rem; }

  .use-motion .menu-item,
  .use-motion .sidebar,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header {
    visibility: visible;
  }

  .use-motion .header,
  .use-motion .site-brand-container .toggle,
  .use-motion .footer { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle,
  .use-motion .custom-logo-image {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line {
    transform: scaleX(1);
  }

  .search-pop-overlay, .sidebar-nav { display: none; }
  .sidebar-panel { display: block; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">Lawted's Blog</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a></li>
        <li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>Tags</a></li>
        <li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
  </ul>
</nav>




</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          Table of Contents
        </li>
        <li class="sidebar-nav-overview">
          Overview
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS%E6%A6%82%E8%BF%B0"><span class="nav-number">1.</span> <span class="nav-text">CSS概述</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#CSS%E9%AB%98%E7%BA%A7%E8%AF%AD%E6%B3%95"><span class="nav-number">2.</span> <span class="nav-text">CSS高级语法</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B4%BE%E7%94%9F%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.1.</span> <span class="nav-text">派生选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#id%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.2.</span> <span class="nav-text">id选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.3.</span> <span class="nav-text">类选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.4.</span> <span class="nav-text">属性选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%83%8C%E6%99%AF"><span class="nav-number">2.5.</span> <span class="nav-text">背景</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%96%87%E6%9C%AC"><span class="nav-number">2.6.</span> <span class="nav-text">文本</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AD%97%E4%BD%93"><span class="nav-number">2.7.</span> <span class="nav-text">字体</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%93%BE%E6%8E%A5"><span class="nav-number">2.8.</span> <span class="nav-text">链接</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%97%E8%A1%A8"><span class="nav-number">2.9.</span> <span class="nav-text">列表</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%A1%A8%E6%A0%BC"><span class="nav-number">2.10.</span> <span class="nav-text">表格</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BD%AE%E5%BB%93"><span class="nav-number">2.11.</span> <span class="nav-text">轮廓</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%9A%E4%BD%8D"><span class="nav-number">2.12.</span> <span class="nav-text">定位</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#CSS-position%E5%B1%9E%E6%80%A7"><span class="nav-number">2.12.1.</span> <span class="nav-text">CSS position属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#CSS-z-index%E5%B1%9E%E6%80%A7"><span class="nav-number">2.12.2.</span> <span class="nav-text">CSS z-index属性</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%B5%AE%E5%8A%A8"><span class="nav-number">2.13.</span> <span class="nav-text">浮动</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B"><span class="nav-number">2.14.</span> <span class="nav-text">盒子模型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%86%85%E8%BE%B9%E8%B7%9D"><span class="nav-number">2.15.</span> <span class="nav-text">内边距</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BE%B9%E6%A1%86"><span class="nav-number">2.16.</span> <span class="nav-text">边框</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%96%E8%BE%B9%E8%B7%9D"><span class="nav-number">2.17.</span> <span class="nav-text">外边距</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6"><span class="nav-number">2.18.</span> <span class="nav-text">外边距合并</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%B9%E9%BD%90%E6%93%8D%E4%BD%9C"><span class="nav-number">2.19.</span> <span class="nav-text">对齐操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%86%E7%B1%BB"><span class="nav-number">2.20.</span> <span class="nav-text">分类</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%B0%BA%E5%AF%B8%E6%93%8D%E4%BD%9C"><span class="nav-number">2.20.1.</span> <span class="nav-text">尺寸操作</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%88%86%E7%B1%BB%E6%93%8D%E4%BD%9C"><span class="nav-number">2.21.</span> <span class="nav-text">分类操作</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AF%BC%E8%88%AA%E6%A0%8F"><span class="nav-number">2.22.</span> <span class="nav-text">导航栏</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%9E%82%E7%9B%B4%E5%AF%BC%E8%88%AA%E6%A0%8F"><span class="nav-number">2.22.1.</span> <span class="nav-text">垂直导航栏</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%B0%B4%E5%B9%B3%E5%AF%BC%E8%88%AA%E6%A0%8F"><span class="nav-number">2.22.2.</span> <span class="nav-text">水平导航栏</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%9B%BE%E7%89%87"><span class="nav-number">2.23.</span> <span class="nav-text">图片</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.24.</span> <span class="nav-text">选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.24.1.</span> <span class="nav-text">元素选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8%E5%88%86%E7%BB%84"><span class="nav-number">2.24.2.</span> <span class="nav-text">选择器分组</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%E8%AF%A6%E8%A7%A3"><span class="nav-number">2.24.3.</span> <span class="nav-text">类选择器详解</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#id%E9%80%89%E6%8B%A9%E5%99%A8-1"><span class="nav-number">2.24.4.</span> <span class="nav-text">id选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8-1"><span class="nav-number">2.24.5.</span> <span class="nav-text">属性选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%90%8E%E4%BB%A3%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.24.6.</span> <span class="nav-text">后代选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E5%AD%90%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.24.7.</span> <span class="nav-text">子元素选择器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#%E7%9B%B8%E9%82%BB%E5%85%84%E5%BC%9F%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-number">2.24.8.</span> <span class="nav-text">相邻兄弟选择器</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3D%E8%BD%AC%E6%8D%A2"><span class="nav-number">2.25.</span> <span class="nav-text">3D转换</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BF%87%E6%B8%A1"><span class="nav-number">2.26.</span> <span class="nav-text">过渡</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8A%A8%E7%94%BB"><span class="nav-number">2.27.</span> <span class="nav-text">动画</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%A4%9A%E5%88%97"><span class="nav-number">2.28.</span> <span class="nav-text">多列</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS%E7%80%91%E5%B8%83%E6%B5%81%E6%95%88%E6%9E%9C"><span class="nav-number">2.29.</span> <span class="nav-text">CSS瀑布流效果</span></a></li></ol></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">Lawted Wu</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">67</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
          
        <span class="site-state-item-count">8</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author site-overview-item animated">
      <span class="links-of-author-item">
        <a href="https://github.com/LAWTED" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;LAWTED" rel="noopener" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a>
      </span>
  </div>



        </div>
      </div>
        <div class="back-to-top animated" role="button" aria-label="Back to top">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="reading-progress-bar"></div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
    <link itemprop="mainEntityOfPage" href="http://example.com/2021/01/28/CSS/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="Lawted Wu">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Lawted's Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          CSS基础
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>

      <time title="Created: 2021-01-28 11:23:46" itemprop="dateCreated datePublished" datetime="2021-01-28T11:23:46+08:00">2021-01-28</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">Edited on</span>
        <time title="Modified: 2021-04-27 20:34:55" itemprop="dateModified" datetime="2021-04-27T20:34:55+08:00">2021-04-27</time>
      </span>

  
    <span class="post-meta-item" title="Views" id="busuanzi_container_page_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="far fa-eye"></i>
      </span>
      <span class="post-meta-item-text">Views: </span>
      <span id="busuanzi_value_page_pv"></span>
    </span>
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <h2 id="CSS概述"><a href="#CSS概述" class="headerlink" title="CSS概述"></a>CSS概述</h2><p>CSS指层叠样式表</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">一般格式</span><br><span class="line">selector&#123;</span><br><span class="line">	property:value</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">例如：</span><br><span class="line">h1&#123;color:red; font-size:14px;&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>属性大于1个，属性之间要用分号隔开</li>
<li>如果值大于1个单词，则需要加上引号：<br><code>p&#123;font-family:&quot;sans serif&quot;&#125;</code></li>
</ul>
<h2 id="CSS高级语法"><a href="#CSS高级语法" class="headerlink" title="CSS高级语法"></a>CSS高级语法</h2><ol>
<li><p>选择器分组</p>
<p> 可以给多个元素加上同一个样式</p>
</li>
</ol>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">h1,h2,h3&#123;color:red;&#125;</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>继承：</li>
</ol>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">body&#123;</span><br><span class="line">	color:green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>body里面的样式，如果没有自己的样式就用这个</p>
<h3 id="派生选择器"><a href="#派生选择器" class="headerlink" title="派生选择器"></a>派生选择器</h3><p>通过依据元素在其位置的上下文关系来定义样式</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;p&gt;&lt;strong&gt;hello css&lt;&#x2F;strong&gt;&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">    &lt;li&gt;&lt;strong&gt;标签&lt;&#x2F;strong&gt;&lt;&#x2F;li&gt;</span><br><span class="line">  &lt;&#x2F;ul&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">li strong&#123;</span><br><span class="line">  color:red;</span><br><span class="line">&#125;</span><br><span class="line">strong&#123;</span><br><span class="line">  color:blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>第一个改变了li strong的颜色，第二个因为li strong更细，就只改变第一个文本</p>
<h3 id="id选择器"><a href="#id选择器" class="headerlink" title="id选择器"></a>id选择器</h3><ol>
<li>id选择器：</li>
</ol>
<ul>
<li>id选择器可以为标有id的HTML元素指定特定的样式</li>
<li>id选择器以”#”来定义</li>
</ul>
<ol start="2">
<li>id选择器和派生选择器：</li>
</ol>
<ul>
<li>常用的方式是id选择器用于建立派生选择器</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;p id&#x3D;&quot;a1&quot;&gt;hello css&lt;a href&#x3D;&quot;http:&#x2F;&#x2F;www.baidu.com&quot;&gt;百度&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;divid&quot;&gt;这是一个div&lt;&#x2F;div&gt; </span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#a1 a&#123;</span><br><span class="line">  color:red;</span><br><span class="line">&#125;</span><br><span class="line">#divid&#123;</span><br><span class="line">  color:blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>id不使用数字开头，第一个是派生和id同时使用，第二个是id</p>
<h3 id="类选择器"><a href="#类选择器" class="headerlink" title="类选择器"></a>类选择器</h3><ol>
<li>类选择器以一个点显示</li>
<li>class也可以用作派生选择器</li>
</ol>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;p class&#x3D;&quot;pclass&quot;&gt;我的第一个段落。&lt;a&gt;你好&lt;&#x2F;a&gt;&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;divclass&quot;&gt;hello div&lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.pclass a</span><br><span class="line">&#123;</span><br><span class="line">  color:red;</span><br><span class="line">&#125;</span><br><span class="line">.divclass&#123;</span><br><span class="line">  color:purple;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h3><ol>
<li>对带有指定属性的HTML元素设置样式</li>
<li>属性和值选择器</li>
</ol>
<figure class="highlight plain"><figcaption><span>html></span></figcaption><table><tr><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line"> &lt;style type&#x3D;&quot;text&#x2F;css&quot;&gt;</span><br><span class="line">   [title]&#123;</span><br><span class="line">     color:blue;</span><br><span class="line">   &#125;</span><br><span class="line">   [title&#x3D;t]&#123;</span><br><span class="line">     color:red;</span><br><span class="line">   &#125;</span><br><span class="line">  &lt;&#x2F;style&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;h1 title&gt;我的第一个HTML页面&lt;&#x2F;h1&gt;</span><br><span class="line">	&lt;p title&#x3D;&quot;t&quot;&gt;我的第一个段落。&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<p>如果没有值，则按属性选择器显示，如果有值则按照属性和值选择器显示</p>
<h3 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">background-attachment 背景图像是否固定或者随着页面的其余部分滚动</span><br><span class="line">background-color      设置元素的背景颜色</span><br><span class="line">background-image      把图片设置为背景</span><br><span class="line">background-position   设置背景图片的起始位置</span><br><span class="line">background-repeat     设置背景图片是否以及如何重复</span><br><span class="line">background-size       规定背景图片的尺寸</span><br><span class="line">background-origin     规定背景图片的定位区域</span><br><span class="line">background-clip       规定背景的绘制区域</span><br></pre></td></tr></table></figure>
<h3 id="文本"><a href="#文本" class="headerlink" title="文本"></a>文本</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">color            文本颜色</span><br><span class="line">direction        文本方向</span><br><span class="line">line-height      行高</span><br><span class="line">letter-spacing   字符间距</span><br><span class="line">text-align       对齐元素中的文本</span><br><span class="line">text-decoration  向文本添加修饰</span><br><span class="line">text-indent      缩进元素中的文本首行</span><br><span class="line">text-transform   元素中的字母</span><br><span class="line">unicode-bidi     设置文本方向</span><br><span class="line">white-space      元素中空白的处理方式</span><br><span class="line">word-spacing     字间距</span><br><span class="line">text-shadow      向文本添加阴影</span><br><span class="line">text-wrap        规定文本的换行规则</span><br></pre></td></tr></table></figure>
<h3 id="字体"><a href="#字体" class="headerlink" title="字体"></a>字体</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">font-family     设置字体系列</span><br><span class="line">font-size       设置字体的尺寸</span><br><span class="line">font-style      设置字体风格</span><br><span class="line">font-variant    以小型大些或正常字体显示文本</span><br><span class="line">font-weight     设置字体的粗细</span><br></pre></td></tr></table></figure>
<h3 id="链接"><a href="#链接" class="headerlink" title="链接"></a>链接</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">a:link         普通的、未被访问的链接</span><br><span class="line">a:visited      用户已访问的链接</span><br><span class="line">a:hover        鼠标指针位于链接上方</span><br><span class="line">a:active       链接被点击的时刻</span><br><span class="line">text-decoration用于去掉链接中的下划线</span><br><span class="line">background-color</span><br></pre></td></tr></table></figure>
<p>设置<code>text-decoration:none</code></p>
<h3 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">list-style           简写列表项</span><br><span class="line">list-style-image     列表项图像</span><br><span class="line">list-style-position  列表标志位置</span><br><span class="line">list-style-type      列表类型</span><br></pre></td></tr></table></figure>
<h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">border            边框</span><br><span class="line">boder-collapse    合并边框</span><br><span class="line">width             宽</span><br><span class="line">height            高</span><br><span class="line">text-align        对齐</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;table id&#x3D;&quot;tb&quot;&gt;</span><br><span class="line">      &lt;tr&gt;</span><br><span class="line">        &lt;th&gt;姓名&lt;&#x2F;th&gt;</span><br><span class="line">        &lt;th&gt;年龄&lt;&#x2F;th&gt;</span><br><span class="line">        &lt;th&gt;性别&lt;&#x2F;th&gt;</span><br><span class="line">      &lt;&#x2F;tr&gt;</span><br><span class="line">      &lt;tr class&#x3D;&quot;hao&quot;&gt;</span><br><span class="line">        &lt;td&gt;吴明泽&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;20&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;男&lt;&#x2F;td&gt;</span><br><span class="line">      &lt;&#x2F;tr&gt;</span><br><span class="line">      &lt;tr&gt;</span><br><span class="line">        &lt;td&gt;张三&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;12&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;男&lt;&#x2F;td&gt;</span><br><span class="line">      &lt;&#x2F;tr&gt;</span><br><span class="line">      &lt;tr class&#x3D;&quot;hao&quot;&gt;</span><br><span class="line">        &lt;td&gt;小周&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;20&lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;女&lt;&#x2F;td&gt;</span><br><span class="line">      &lt;&#x2F;tr&gt;</span><br><span class="line">  &lt;&#x2F;table&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#tb&#123;</span><br><span class="line">  border-collapse:collapse;</span><br><span class="line">  width:200px</span><br><span class="line">&#125;</span><br><span class="line">#tb td&#123;</span><br><span class="line">  border:1px solid black;</span><br><span class="line">  padding: 5px;</span><br><span class="line">&#125;</span><br><span class="line">#tb th&#123;</span><br><span class="line">  text-align:center;</span><br><span class="line">  background-color:black;</span><br><span class="line">  color:white;</span><br><span class="line">&#125;</span><br><span class="line">#tb tr.hao td&#123;</span><br><span class="line">  color:red;</span><br><span class="line">  background-color:grey;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="轮廓"><a href="#轮廓" class="headerlink" title="轮廓"></a>轮廓</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">outline       设置轮廓属性</span><br><span class="line">outline-color 设置轮廓颜色</span><br><span class="line">outline-style 设置轮廓样式</span><br><span class="line">outline-width 设置轮廓宽度</span><br></pre></td></tr></table></figure>
<h3 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h3><ul>
<li>CSS定位</li>
<li><ul>
<li>改变元素在页面上的位置</li>
</ul>
</li>
<li>CSS定位机制</li>
<li><ul>
<li>普通流：元素按照其在HTML中的位置顺序决定排布的过程</li>
</ul>
</li>
<li><ul>
<li>浮动：</li>
</ul>
</li>
<li><ul>
<li>绝对布局</li>
</ul>
</li>
</ul>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">position       把元素放在一个静态的、相对的、绝对的、固定的位置中</span><br><span class="line">top            元素向上的偏移量</span><br><span class="line">left           元素向左的偏移量</span><br><span class="line">right          元素向右的偏移量</span><br><span class="line">bottom         元素向下的偏移量</span><br><span class="line">overflow       设置元素溢出其区域发生的事情</span><br><span class="line">clip           设置元素显示的形状</span><br><span class="line">vertical-align 设置元素垂直对齐方式</span><br><span class="line">z-index        设置元素的堆叠顺序</span><br></pre></td></tr></table></figure>
<h4 id="CSS-position属性"><a href="#CSS-position属性" class="headerlink" title="CSS position属性"></a>CSS position属性</h4><ul>
<li>static</li>
<li>relative</li>
<li>absolute</li>
<li>fixed       随着页面动</li>
</ul>
<h4 id="CSS-z-index属性"><a href="#CSS-z-index属性" class="headerlink" title="CSS z-index属性"></a>CSS z-index属性</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">z-index: 1;</span><br><span class="line">谁的值大，谁在前面</span><br></pre></td></tr></table></figure>
<h3 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h3><p>float属性可用的值：</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">left:元素向左浮动</span><br><span class="line">right：元素向右浮动</span><br><span class="line">none：元素不浮动</span><br><span class="line">inherit：从父级继承浮动属性</span><br></pre></td></tr></table></figure>
<p>clear属性</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">去掉浮动属性</span><br><span class="line">clear属性值：</span><br><span class="line">	left、right：去掉元素向左、向右浮动</span><br><span class="line">	both：左右两侧均去掉浮动</span><br><span class="line">	inherit：从父级继承来的clear属性</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;container&quot;&gt;&lt;div id&#x3D;&quot;fd&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;sd&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;div id&#x3D;&quot;td&quot;&gt;&lt;&#x2F;div&gt;</span><br><span class="line">    &lt;div id&#x3D;&quot;text&quot;&gt;hello world&lt;&#x2F;div&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">#fd&#123;</span><br><span class="line">  width:50px;</span><br><span class="line">  height:50px;</span><br><span class="line">  background-color:red;</span><br><span class="line">	float:left;</span><br><span class="line">&#125;</span><br><span class="line">#sd&#123;</span><br><span class="line">  width:50px;</span><br><span class="line">  height:50px;</span><br><span class="line">  background-color:blue;</span><br><span class="line">  float:left;</span><br><span class="line">&#125;</span><br><span class="line">#td&#123;</span><br><span class="line">  width:50px;</span><br><span class="line">  height:50px;</span><br><span class="line">  background-color:green;</span><br><span class="line">  float:left;</span><br><span class="line">&#125;</span><br><span class="line">#text&#123;</span><br><span class="line">  clear:left;</span><br><span class="line">&#125;</span><br><span class="line">#container&#123;</span><br><span class="line">  width:100px;</span><br><span class="line">  height:500px;</span><br><span class="line">  background-color:grey</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="盒子模型"><a href="#盒子模型" class="headerlink" title="盒子模型"></a>盒子模型</h3><p>margin、boder、padding、content部分组成</p>
<h3 id="内边距"><a href="#内边距" class="headerlink" title="内边距"></a>内边距</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">padding             设置所有边距</span><br><span class="line">padding-bottom      设置底边距</span><br><span class="line">padding-left        设置左边距</span><br><span class="line">padding-right       设置右边距</span><br><span class="line">padding-top         设置上边距(px)</span><br></pre></td></tr></table></figure>
<h3 id="边框"><a href="#边框" class="headerlink" title="边框"></a>边框</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">border-style          边框样式</span><br><span class="line">border-top-style</span><br><span class="line">border-left-style</span><br><span class="line">border-right-style</span><br><span class="line">border-bottom-style</span><br><span class="line"></span><br><span class="line">border-width          边框宽度</span><br><span class="line">bottom-top-width</span><br><span class="line">bottom-left-width</span><br><span class="line">bottom-right-width</span><br><span class="line">bottom-bottom-width</span><br><span class="line"></span><br><span class="line">border-color          边框颜色</span><br><span class="line">bottom-top-color</span><br><span class="line">bottom-left-color</span><br><span class="line">bottom-right-color</span><br><span class="line">bottom-bottom-color</span><br><span class="line"></span><br><span class="line">border-radius         圆角边框</span><br><span class="line">box-shadow            边框阴影(10px 10px 5px red)</span><br><span class="line">border-image          边框图片</span><br></pre></td></tr></table></figure>
<h3 id="外边距"><a href="#外边距" class="headerlink" title="外边距"></a>外边距</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">margin                设置所有的边距</span><br><span class="line">margin-bottom         设置底边距</span><br><span class="line">margin-left           设置左边距</span><br><span class="line">margin-right          设置右边距</span><br><span class="line">margin-top            设置上边距</span><br></pre></td></tr></table></figure>
<h3 id="外边距合并"><a href="#外边距合并" class="headerlink" title="外边距合并"></a>外边距合并</h3><p>两个盒子的外边距会合并，按照边距多的合并</p>
<h3 id="对齐操作"><a href="#对齐操作" class="headerlink" title="对齐操作"></a>对齐操作</h3><ul>
<li>使用margin属性进行水平对齐（margin：0px auto）</li>
<li>使用position属性进行对齐</li>
<li>使用float属性进行对齐</li>
</ul>
<h3 id="分类"><a href="#分类" class="headerlink" title="分类"></a>分类</h3><h4 id="尺寸操作"><a href="#尺寸操作" class="headerlink" title="尺寸操作"></a>尺寸操作</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">height            设置元素高度</span><br><span class="line">line-height       设置行高</span><br><span class="line">max-height        设置元素最大高度</span><br><span class="line">max-width         设置元素最大宽度</span><br><span class="line">min-width         设置元素最小宽度</span><br><span class="line">min-height        设置元素最小高度</span><br><span class="line">width             设置元素宽度</span><br></pre></td></tr></table></figure>
<h3 id="分类操作"><a href="#分类操作" class="headerlink" title="分类操作"></a>分类操作</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">clear             设置一个元素的侧面是否允许其他的浮动元素</span><br><span class="line">cursor            规定当指向某元素之上时显示的指针类型</span><br><span class="line">display           设置是否及如何显示元素</span><br><span class="line">float             定义元素在哪个方向浮动</span><br><span class="line">position          把元素放置到一个静态的、相对的、绝对的固定的位置</span><br><span class="line">visibility        设置元素可见或者不可见</span><br></pre></td></tr></table></figure>
<h3 id="导航栏"><a href="#导航栏" class="headerlink" title="导航栏"></a>导航栏</h3><h4 id="垂直导航栏"><a href="#垂直导航栏" class="headerlink" title="垂直导航栏"></a>垂直导航栏</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ul&#123;</span><br><span class="line">  list-style-type:none;</span><br><span class="line">  margin:0px;</span><br><span class="line">  padding:0px;</span><br><span class="line">&#125;</span><br><span class="line">a:link,a:visited&#123;</span><br><span class="line">  text-decoration:none;</span><br><span class="line">  display:block;</span><br><span class="line">  background-color:red;</span><br><span class="line">  width:50px;</span><br><span class="line">  text-align:center</span><br><span class="line">&#125;</span><br><span class="line">a:active,a:hover&#123;</span><br><span class="line">  background-color:blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="水平导航栏"><a href="#水平导航栏" class="headerlink" title="水平导航栏"></a>水平导航栏</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">ul&#123;</span><br><span class="line">  list-style-type:none;</span><br><span class="line">  margin:0px;</span><br><span class="line">  padding:0px;</span><br><span class="line">&#125;</span><br><span class="line">a:link,a:visited&#123;</span><br><span class="line">  text-decoration:none;</span><br><span class="line">  display:block;</span><br><span class="line">  background-color:red;</span><br><span class="line">  width:50px;</span><br><span class="line">  text-align:center</span><br><span class="line">&#125;</span><br><span class="line">a:active,a:hover&#123;</span><br><span class="line">  background-color:blue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">li&#123;</span><br><span class="line">  float:left;</span><br><span class="line">  padding:3px;</span><br><span class="line">  font-size:20px;</span><br><span class="line">  font-weight:bold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="图片"><a href="#图片" class="headerlink" title="图片"></a>图片</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">opacity:0.5;        透明度</span><br></pre></td></tr></table></figure>
<h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><h4 id="元素选择器"><a href="#元素选择器" class="headerlink" title="元素选择器"></a>元素选择器</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">例如</span><br><span class="line">h1&#123;&#125;</span><br><span class="line">a&#123;&#125;</span><br></pre></td></tr></table></figure>

<h4 id="选择器分组"><a href="#选择器分组" class="headerlink" title="选择器分组"></a>选择器分组</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">例如</span><br><span class="line">h1,h2&#123;&#125;</span><br><span class="line">同配符</span><br><span class="line">*&#123;&#125;</span><br></pre></td></tr></table></figure>
<h4 id="类选择器详解"><a href="#类选择器详解" class="headerlink" title="类选择器详解"></a>类选择器详解</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">1.类选择器</span><br><span class="line">.class&#123;&#125;</span><br><span class="line"></span><br><span class="line">2.结合元素选择器</span><br><span class="line">a.class&#123;&#125;</span><br><span class="line"></span><br><span class="line">3.多类选择器</span><br><span class="line">.class.class&#123;&#125;</span><br><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;p class&#x3D;&quot;p1&quot;&gt;我的第一个段落。&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;p class&#x3D;&quot;p2&quot;&gt;我的第一个段落。&lt;&#x2F;p&gt;</span><br><span class="line">  &lt;p class&#x3D;&quot;p1 p2&quot;&gt;我的第一个段落。&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br><span class="line"></span><br><span class="line">.p1&#123;</span><br><span class="line">  font-size:30px</span><br><span class="line">&#125;</span><br><span class="line">.p2&#123;</span><br><span class="line">  color:red;</span><br><span class="line">&#125;</span><br><span class="line">.p1.p2&#123;</span><br><span class="line">  background-color:lightblue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="id选择器-1"><a href="#id选择器-1" class="headerlink" title="id选择器"></a>id选择器</h4><ol>
<li>ID只能在文档中使用一次，而类可以使用多次</li>
<li>ID选择器不能结合使用</li>
<li>当结合js的时候，需要使用id</li>
</ol>
<h4 id="属性选择器-1"><a href="#属性选择器-1" class="headerlink" title="属性选择器"></a>属性选择器</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">[title]&#123;&#125;</span><br><span class="line">[title~&#x3D;&quot;title&quot;]&#123;&#125;      包含title都会变化</span><br><span class="line"></span><br><span class="line">&lt;p title&#x3D;&quot;title&quot;&gt;你好&lt;&#x2F;p&gt;</span><br><span class="line">&lt;p title&#x3D;&quot;title hello&quot;&gt;你好&lt;&#x2F;p&gt;</span><br></pre></td></tr></table></figure>
<h4 id="后代选择器"><a href="#后代选择器" class="headerlink" title="后代选择器"></a>后代选择器</h4><figure class="highlight plain"><figcaption><span>html></span></figcaption><table><tr><td class="code"><pre><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;p&gt;我的&lt;strong&gt;第一个&lt;&#x2F;strong&gt;段落。&lt;&#x2F;p&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">p strong&#123;</span><br><span class="line">  color:red</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>可以很多层</p>
<h4 id="子元素选择器"><a href="#子元素选择器" class="headerlink" title="子元素选择器"></a>子元素选择器</h4><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">p&gt;strong&#123;</span><br><span class="line"> color:red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>只能一层</p>
<h4 id="相邻兄弟选择器"><a href="#相邻兄弟选择器" class="headerlink" title="相邻兄弟选择器"></a>相邻兄弟选择器</h4><p>没什么用</p>
<h3 id="3D转换"><a href="#3D转换" class="headerlink" title="3D转换"></a>3D转换</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">2D转换方法</span><br><span class="line">translate()</span><br><span class="line">-webkit-transform:translate(100px,100px);    &#x2F;&#x2F;safari chrome</span><br><span class="line"></span><br><span class="line">rotate()</span><br><span class="line">transform:rotate(60deg);</span><br><span class="line"></span><br><span class="line">scale()</span><br><span class="line">transform:scale(1,2);                     &#x2F;&#x2F;宽高度的倍数</span><br><span class="line"></span><br><span class="line">skew()</span><br><span class="line">transform:skew(50deg,50deg);               &#x2F;&#x2F;绕着X轴倾斜，绕着Y轴倾斜</span><br><span class="line"></span><br><span class="line">matrix()</span><br><span class="line"></span><br><span class="line">3D转换方法</span><br><span class="line">rotateX(deg)</span><br><span class="line">rotateY(deg)</span><br></pre></td></tr></table></figure>
<h3 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">transition                 设置四个过渡属性</span><br><span class="line">transition-property        过渡的名称</span><br><span class="line">transition-duration        过渡效果花费的时间</span><br><span class="line">transition-timing-function 过渡效果的时间曲线</span><br><span class="line">transition-delay           过渡效果开始时间</span><br></pre></td></tr></table></figure>
<h3 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">div&#123;</span><br><span class="line">	animation: anim 5s infinite alternate;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">@keyframes&#123;</span><br><span class="line">	0%&#123;background:red; left:0px;top:0px&#125;</span><br><span class="line">	25%&#123;background:red; left:0px;top:0px&#125;</span><br><span class="line">	50%&#123;&#125;</span><br><span class="line">	75%&#123;&#125;</span><br><span class="line">	100%&#123;&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="多列"><a href="#多列" class="headerlink" title="多列"></a>多列</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">column-count</span><br><span class="line">column-gap</span><br><span class="line">column-rule</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">&lt;meta charset&#x3D;&quot;utf-8&quot;&gt;</span><br><span class="line">&lt;title&gt;文档标题&lt;&#x2F;title&gt;</span><br><span class="line">&lt;&#x2F;head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">  &lt;div class&#x3D;&quot;div1&quot;&gt;</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">    大家好，我是小周！</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;body&gt;</span><br><span class="line">&lt;&#x2F;html&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.div1&#123;</span><br><span class="line">  column-count:3;</span><br><span class="line">  column-gap:10px;</span><br><span class="line">  column-rule:5px outset red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="CSS瀑布流效果"><a href="#CSS瀑布流效果" class="headerlink" title="CSS瀑布流效果"></a>CSS瀑布流效果</h3><figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">.container&#123;</span><br><span class="line">  column-width:250px;</span><br><span class="line">  column-gap:5px;</span><br><span class="line">&#125;</span><br><span class="line">.container div&#123;</span><br><span class="line">  width:250px;</span><br><span class="line">  margin:5px o;</span><br><span class="line">&#125;</span><br><span class="line">.container p&#123;</span><br><span class="line">  text-align:center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E6%8A%80%E6%9C%AF/" rel="tag"># 技术</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/2021/01/28/axios/" rel="prev" title="axios基础">
                  <i class="fa fa-chevron-left"></i> axios基础
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/2021/02/01/LEETCODE%20621%20%E4%BB%BB%E5%8A%A1%E8%B0%83%E5%BA%A6%E5%99%A8/" rel="next" title="LEETCODE 621 任务调度器">
                  LEETCODE 621 任务调度器 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>







<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      const activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      const commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Lawted Wu</span>
</div>
<div class="busuanzi-count">
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      <span class="site-uv" title="Total Visitors">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      <span class="site-pv" title="Total Views">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
</div>

    </div>
  </footer>

  


  <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>


<script>
var options = {
  bottom: '64px', // default: '32px'
  right: '32px', // default: '32px'
  left: 'unset', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#000',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: true, // default: true,
  label: ' ', // default: ''
  autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
</script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/schemes/muse.js"></script><script src="/js/next-boot.js"></script>

  






  
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





</body>
</html>
